<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="35%">
    <div class="fused-detail" v-if="Object.keys(originalData).length">
      <el-tabs
        v-model="activeName"
        tab-position="left"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          v-for="(val, key, idx) in originalData"
          :key="idx"
          :name="key"
          :label="key"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="ontology-info">
        <div class="ontology-top">
          <div class="info-name bold-text">{{ activeName }}</div>
          <template v-if="fusionStatus === 0">
            <el-button
              v-if="isSingleStore"
              size="mini"
              style="width: 140px"
              @click="updateSingle(0)"
            >
              已经取消融合
            </el-button>
            <el-button
              v-else
              size="mini"
              style="width: 140px"
              @click="updateSingle(1)"
            >
              取消融合，单独入库
            </el-button>
          </template>
        </div>
        <div class="info-attr">
          <span class="attr-label">所属类别：</span>
          <span class="attr-content">{{ fusionData.ontologyName }}</span>
        </div>
        <div class="box-title bold-text">属性</div>
        <el-table
          size="mini"
          :data="getPropsData()"
          :header-cell-style="{ background: '#F3F4F8', color: '#000000' }"
          :cell-style="{ color: '#333333' }"
        >
          <el-table-column
            prop="name"
            label="属性名"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="value"
            label="属性值"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer v-if="fusionStatus === 0">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialog">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: "PendingFused",
  data() {
    return {
      dialogTitle: "全部待融合实体",
      dialogVisible: false,
      activeName: null,
      isSingleStore: undefined, // 是否单独入库
      fusionData: {},
      fusionStatus: 2,
      originalData: {},
    };
  },
  methods: {
    // 打开弹窗
    openDialog(row) {
      this.fusionData = row || {};
      this.fusionStatus = Number.isInteger(row.status) ? row.status : 2;
      this.originalData = row.originalData || {};
      this.activeName = Object.keys(row.originalData)[0];
      this.dialogVisible = true;
    },
    handleTabClick() {
      this.isSingleStore = this.originalData[this.activeName].singleStorage;
    },
    updateSingle(num) {
      if (num) {
        this.originalData[this.activeName].singleStorage = 1;
        this.isSingleStore = 1;
      } else {
        delete this.originalData[this.activeName].singleStorage;
        this.isSingleStore = undefined;
      }
    },
    getPropsData() {
      const tmpObj = this.originalData[this.activeName];
      const res = [];
      for (let k in tmpObj) {
        if (k !== "singleStorage") {
          res.push({ name: k, value: tmpObj[k] });
        }
      }
      return res;
    },
    confirmDialog() {
      this.fusionData.originalData = this.originalData;
      this.fusionData.entityName = JSON.stringify(this.fusionData.entityName);
      this.fusionData.attributes = JSON.stringify(this.fusionData.attributes);
      this.fusionData.originalData = JSON.stringify(
        this.fusionData.originalData
      );
      this.fusionData.resolutionRule = JSON.stringify(
        this.fusionData.resolutionRule
      );
      this.$axios
        .post(
          this.$api.knowledgeComputation.knowledgeFusion.submitSingleStorage,
          this.fusionData
        )
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.$message.success(message);
            this.$emit("reload");
            this.dialogVisible = false;
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.fused-detail {
  display: flex;
  height: 30vh;
  overflow: hidden;
}

.ontology-info {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}

.ontology-top {
  display: flex;
  justify-content: space-between;
}

.bold-text {
  font-weight: 700;
  font-size: 15px;
}

.info-attr {
  font-size: 13px;
  color: #777;
  // margin: 5px 0;
}

.box-title {
  margin: 20px 0 10px;
}
</style>
